<template>
	<view class="container"
		@touchstart="handleTouchStart"
		@touchmove="handleTouchMove" 
		@touchend="handleTouchEnd">
		<!-- 顶部导航 -->
		<view class="nav-bar">
			<view class="status-bar" :style="'height:' + statusBarHeight + 'px'"></view>
			<view class="nav-content">
				<text class="page-title">我的</text>
				
				<!-- 滑动提示 -->
				<view class="swipe-hint" v-if="showSwipeHint">
					<text class="hint-text">👈 左右滑动切换页面 👉</text>
				</view>
			</view>
		</view>

		<!-- 用户信息卡片 -->
		<view class="user-card" @tap="navigateTo('/pages/profile/info/index')">
			<view class="avatar-section">
				<image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
			</view>
			<view class="user-info">
				<text class="username">小七七</text>
				<text class="user-desc">加入飞蛐560天 · 获赞 3002</text>
			</view>
			<text class="arrow">→</text>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-title">
				<text>我的功能</text>
			</view>
			
			<!-- 第一行 -->
			<view class="menu-row">
				<view class="menu-item" @tap="navigateTo('/pages/profile/orders/list/index')">
					<view class="menu-icon orders"></view>
					<text class="menu-text">我的换班</text>
					<view class="badge" v-if="unreadCounts.orders > 0">
						<text>{{ unreadCounts.orders }}</text>
					</view>
				</view>
				
				<view class="menu-item" @tap="navigateTo('/pages/profile/messages/list/index')">
					<view class="menu-icon messages"></view>
					<text class="menu-text">消息</text>
					<view class="badge" v-if="unreadCounts.messages > 0">
						<text>{{ unreadCounts.messages }}</text>
					</view>
				</view>
			</view>

			<!-- 第二行 -->
			<view class="menu-row">
				<view class="menu-item" @tap="navigateTo('/pages/profile/replies/list/index')">
					<view class="menu-icon replies"></view>
					<text class="menu-text">我的回复</text>
				</view>
				
				<view class="menu-item" @tap="navigateTo('/pages/profile/favorites/list/index')">
					<view class="menu-icon favorites"></view>
					<text class="menu-text">我的收藏</text>
				</view>
			</view>
		</view>

		<!-- 其他功能 -->
		<view class="other-section">
			<view class="other-item" @tap="navigateTo('/pages/profile/browsing/list/index')">
				<view class="other-icon browsing"></view>
				<text class="other-text">我的浏览</text>
				<text class="arrow">→</text>
			</view>
			
			<view class="other-item" @tap="navigateTo('/pages/profile/feedback/index')">
				<view class="other-icon feedback"></view>
				<text class="other-text">意见反馈</text>
				<text class="arrow">→</text>
			</view>
			
			<view class="other-item" @tap="navigateTo('/pages/profile/admin/index')">
				<view class="other-icon admin"></view>
				<text class="other-text">管理员征召</text>
				<text class="arrow">→</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0,
			unreadCounts: {
				orders: 2,
				messages: 3
			},
			
			// 滑动相关数据
			showSwipeHint: true,
			startX: 0,
			startY: 0,
			startTime: 0
		}
	},
	onLoad() {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync()
		this.statusBarHeight = systemInfo.statusBarHeight || 0
	},
	onReady() {
		uni.setNavigationBarTitle({
			title: '我的'
		})
	},
	onShow() {
		// 获取未读消息数
		this.getUnreadCounts()
	},
	methods: {
		navigateTo(url) {
			uni.navigateTo({
				url: url
			})
		},
		getUnreadCounts() {
			// 模拟获取未读消息数
			setTimeout(() => {
				this.unreadCounts = {
					orders: 2,
					messages: 3
				}
			}, 500)
		},
		handleTouchStart(e) {
			const touch = e.touches[0];
			this.startX = touch.clientX || touch.pageX;
			this.startY = touch.clientY || touch.pageY;
			this.startTime = Date.now();
		},
		handleTouchMove(e) {
			// 在滑动过程中什么都不做，避免影响滚动
		},
		handleTouchEnd(e) {
			const touch = e.changedTouches[0];
			const endX = touch.clientX || touch.pageX;
			const endY = touch.clientY || touch.pageY;
			
			const deltaX = endX - this.startX;
			const deltaY = endY - this.startY;
			const duration = Date.now() - this.startTime;
			
			// 判断是否为水平滑动
			if (Math.abs(deltaY) > Math.abs(deltaX) || Math.abs(deltaX) < 50) {
				return;
			}
			
			// 判断滑动速度和距离
			const velocity = Math.abs(deltaX) / duration;
			const isValidSwipe = Math.abs(deltaX) > 80 || (velocity > 0.3 && Math.abs(deltaX) > 30);
			
			if (!isValidSwipe) return;
			
			// 隐藏提示
			this.showSwipeHint = false;
			
			// 右滑跳转到换班页面（TabBar切换）
			uni.switchTab({
				url: '/pages/schedule/index',
				success: () => {
					uni.showToast({
						title: '切换到换班',
						icon: 'none',
						duration: 1000
					});
				}
			});
		}
	}
}
</script>

<style lang="scss">
$primary-color: #6c5ce7;
$text-color: #333333;
$light-text: #999999;
$bg-color: #f6f7fb;

.container {
	background-color: $bg-color;
	min-height: 100vh;
	padding-bottom: 30rpx;
}

/* 顶部导航 */
.nav-bar {
	background-color: #fff;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.nav-content {
	padding: 20rpx 30rpx;
	text-align: center;
}

.page-title {
	font-size: 36rpx;
	font-weight: bold;
	color: $text-color;
}

/* 用户信息卡片 */
.user-card {
	margin: 30rpx;
	padding: 40rpx 30rpx;
	background-color: #fff;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.avatar-section {
	margin-right: 30rpx;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
}

.user-info {
	flex: 1;
}

.username {
	font-size: 36rpx;
	font-weight: 500;
	color: $text-color;
	display: block;
	margin-bottom: 10rpx;
}

.user-desc {
	font-size: 26rpx;
	color: $light-text;
}

.arrow {
	font-size: 32rpx;
	color: $light-text;
}

/* 功能菜单 */
.menu-section {
	margin: 30rpx;
}

.menu-title {
	margin-bottom: 20rpx;
	
	text {
		font-size: 32rpx;
		font-weight: 500;
		color: $text-color;
	}
}

.menu-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30rpx;
}

.menu-item {
	width: 320rpx;
	height: 200rpx;
	background-color: #fff;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.menu-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	margin-bottom: 20rpx;
	
	&.orders {
		background-color: #e8f4fd;
	}
	
	&.messages {
		background-color: #fff2e8;
	}
	
	&.replies {
		background-color: #f0f9ff;
	}
	
	&.favorites {
		background-color: #fef7f0;
	}
}

.menu-text {
	font-size: 28rpx;
	color: $text-color;
	font-weight: 500;
}

.badge {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	background-color: #ff4d4f;
	color: #fff;
	border-radius: 20rpx;
	width: 40rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20rpx;
}

/* 其他功能 */
.other-section {
	margin: 30rpx;
}

.other-item {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.other-icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	margin-right: 30rpx;
	
	&.browsing {
		background-color: #e6f7ff;
	}
	
	&.feedback {
		background-color: #f6ffed;
	}
	
	&.admin {
		background-color: #fff1f0;
	}
}

.other-text {
	flex: 1;
	font-size: 30rpx;
	color: $text-color;
}

/* 滑动提示 */
.swipe-hint {
	padding: 12rpx 30rpx;
	background: linear-gradient(135deg, #6c5ce7, #a29bfe);
	text-align: center;
	animation: fadeInOut 3s ease-in-out;
	margin-top: 10rpx;
}

.hint-text {
	font-size: 22rpx;
	color: #fff;
	opacity: 0.9;
}

@keyframes fadeInOut {
	0%, 100% { opacity: 0; transform: translateY(-5rpx); }
	20%, 80% { opacity: 1; transform: translateY(0); }
}
</style> 